<template>
  <div class="App">
    <h1 v-red>我是App组件</h1>
    <h1>count:{{count}}</h1>
    <button @click="count++">修改count值</button>
    <button @click="$destroy()">卸载</button>
    <Count :count="count"/>
    <div :style="{opacity}">React学不会怎么办？</div>
    <button @click="$destroy()">不学了</button>
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  data(){
    return{
      count:1,
      opacity: 1,
      timer:null
    }
  },
  components: {Count},
  comments:{
    Count
  },
  // beforeCreate() {
  //   console.log('APP---beforeCreate')
  // },
  // created() {
  //   console.log('APP---created')
  // },
  // beforeMount() {
  //   console.log('APP---beforeMount')
  // },
  // mounted() {
  //   this.timer = setInterval(()=>{
  //     this.opacity -= 0.2
  //     if(this.opacity<=0){
  //       this.opacity = 1
  //     }
  //   },500)
  //   console.log('APP---mounted')
  // },
  // beforeUpdate() {
  //   console.log('APP---beforeUpdate')
  // },
  // updated() {
  //   console.log('APP---updated')
  // },
  // beforeDestroy() {
  //   console.log('APP---beforeDestroy')
  // },
  // destroyed() {
  //   console.log('APP---destroyed')
  // }
}
</script>

<!--scoped表示给当前元素设置作用域，只对当前组件内的元素生效-->
<style scoped>
.App{
  background-color: antiquewhite;
}

/*样式穿透---只在父组件上添加自定义属性，子组件不再添加自定义属性*/
.App >>> .count{
  background-color: aqua;
}
</style>